<style type="text/css">
h4.pagin.sub-title {
    padding-bottom: 3px;
    border-bottom: 1px dashed #e5e5e5;
}
</style>
<div ng-controller="paginController">
    <div class="alert alert-info">
        <p>这里展示的是翻页指令，指令有三个扩展属性，pagin(必须)，show(必须)，visible(可选)。</p>
        <p>pagin是$scope属性，为对象引用，结构为{pageIndex: 1, recordCnt:53, pageSize:10};</p>
        <p>showPage是$scope属性，为方法引用，用于页码点击时的回调;</p>
        <p>visible是$scope属性，为boolean型，默认为false,当页码不足2页时，翻页控件不会显示。将visible设置为true，则强制显示。</p>
    </div>
    <h4 class="pagin sub-title">展示</h4>
    
    <sc-pagin pagin="pagin" show="showPage(pagin.pageIndex)" visible="visible"></sc-pagin>

    <h4 class="pagin sub-title">选项</h4>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="pageSize">条数/页</label>
            <div class="col-sm-9">
                <input type="number" class="form-control" ng-model="pagin.pageSize" id="pageSize" placeholder="Page Size">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="recordCnt">总条数</label>
            <div class="col-sm-9">
                <input type="number" class="form-control" ng-model="pagin.recordCnt" id="recordCnt" placeholder="Record Count">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="pageIndex">页码</label>
            <div class="col-sm-9">
                <input type="number" class="form-control" ng-model="pagin.pageIndex" id="pageIndex" placeholder="PageIndex" ng-disabled="true">
            </div>
        </div>
        <div class="col-sm-offset-3 col-sm-9">
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="visible"> 显示控件
                    </label>
                </div>
            </div>
        </div>
    </form>
</div>
